<!doctype html>
<html>
<head>
 <title>HTML5-now: details element</title>
 <script src="../base2-legacy.js"></script><!-- support really old browsers -->
 <script src="../html5-now.js"></script>
 <script src="colorizer.js"></script>
 <link rel="stylesheet" type="text/css" href="examples.css">
</head>
<body>
 <h1>HTML5-now: <code>details</code> element</h1>
 
 <p><strong>Please note</strong> that there is currently a
 <a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/023240.html">problem</a>
  with the rendering model for this element so these examples are subject to
  change.</p>
 
 <p>A <code>details</code> element in the <em>closed</em> state:</p>

 <div class="example">
  <details>
   <dt>Click the arrow to open/close.</dt>
   <dd>This is the content of the element.</dd>
  </details>
 </div>
 
 <p>This is the markup for the above example:</p>
 
<pre class="html">
&lt;details&gt;
 &lt;dt&gt;Click the arrow to open/close.&lt;/dt&gt;
 &lt;dd&gt;This is the content of the element.&lt;/dd&gt;
&lt;/details&gt;
</pre>

 <p>And now a <code>details</code> element in the <em>open</em> state:</p>

 <div class="example">
  <details open>
   <dt>Click the arrow to open/close.</dt>
   <dd>This is the content of the element.</dd>
  </details>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;details open&gt;
 &lt;dt&gt;Click the arrow to open/close.&lt;/dt&gt;
 &lt;dd&gt;This is the content of the element.&lt;/dd&gt;
&lt;/details&gt;
</pre>

 <p>If the initial <code>dt</code> element is missing then a default legend is
  created with the text "Details":</p>

 <div class="example">
  <details>
   <dd>This is the content of the element.</dd>
  </details>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;details&gt;
 &lt;dd&gt;This is the content of the element.&lt;/dd&gt;
&lt;/details&gt;
</pre>
</body>
</html>
